
<template>
  <div class="header">
      <el-row >
        <el-col  :xs="16" :sm="18" :md="12" >
            <div class="grid-content ">
                <img src="../assets/logo.png">
                <!-- <a> -->
                    
                    <h1>数据管理及投放系统</h1>
                <!-- </a> -->
            </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="12"   >
            <div class="settings">
                <div><i class="el-icon-circle-close"></i>李雪明</div>
                <div><i class="el-icon-circle-close"></i>退出</div>
            </div>
        </el-col>
      </el-row>
  </div>    
</template>

<script>
export default {
    name: 'TopMenu'
}
</script>

<style lang="scss" scoped="" type="text/css">
$bg: #2a303e;
$height: 50px;
$fontColor:#fff;
.header {
    height: $height;
    background-color: $bg;
    
    .el-row {
        padding: 0 15px;
    }
    .grid-content {
        padding: 0 15px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        
        img {
            display: block;
            float: left;
            width: 30px;
        }
        h1 {
            color: $fontColor;
            font-size: 18px;
            line-height: $height;
            text-align: left;
            padding-left:15px;
            flex: 1;
        }

    }
    .settings {
        width: 100%;
        float: right;
        height: $height;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;
        div{
            flex: 1;
            color: $fontColor;
        }
        
    }
    .settings:after {
        content: "";
        width: 2px;
        height: 35px;
        background-color: rgba(0,0,0,0.15);
        box-shadow: 0 0 4px rgba(0,0,0,0.2);
        left:0;
        top:7px;
        position: absolute;
    }
    @media only screen and (min-width: 992px) {
            .settings {
                width: 30%
            }
        }
  
}
</style>

